<template>
	<view class="container">
		<!-- F1 轮播图 开始 -->
		<view class="swiper-box">
			<u-swiper
			:list="banner"
			indicatorMode="line"
			circular
			imgMode="aspectFill"
			:height='383'
			>
			</u-swiper>
		</view>
			<!-- F1 轮播图 结束 -->
			
			<!-- F2 菜单 开始 -->
			<view class="menu-box">
				<view class="left" @click="go('/pages/getJob/info')">
					<image src="@/static/image/getJob/info-icon.png" mode="widthFix"></image>
					<view class="content-box">
						<view class="text">
							信息完善
						</view>
						<view class="reminds">
							个人信息资料填写
						</view>
					</view>
				</view>
				<view class="rightSide">
					<view class="skills" @click="go('/pages/getJob/skills')">
						<image src="@/static/image/getJob/skills-icon.png" mode="widthFix"></image>
						<view class="content-box">
							<view class="text">
								技能培训
							</view>
							<view class="reminds">
								新技能掌握
							</view>
						</view>
					</view>
					<view class="rules" @click="go('/pages/getJob/rules')">
						<image src="@/static/image/getJob/rules-icon.png" mode="widthFix"></image>
						<view class="content-box">
							<view class="text">
								政策资讯
							</view>
							<view class="reminds">
								政策信息全知道
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- F2 菜单 结束 -->
			
			<!-- F3 列表标题 开始 -->
			<view class="list-title">
				<view >岗位信息</view>
				<view @click="go('/pages/getJob/allWork')">
					全部岗位
					<uni-icons style="vertical-align:text-top" type="forward" color="#3E9CF9"></uni-icons>
				</view>
			</view>
			<!-- F3 列表标题 结束 -->
			
			<!-- F4 岗位列表 开始 -->
			<view class="card" v-for="item in list" @click="go()">
				<view class="title-box">
					<view>{{item.postName}}</view>
					<view class="location">{{item.address}}</view>
				</view>
				<view class="pay-box">
					<view>{{item.salaryRange}}</view>
					<view class="unit">元/月</view>
				</view>
				<view class="description">
					职位描述：{{item.dutyDesc}}
				</view>
				<view class="time-box">
					<view>{{item.companyName}}</view>
					<view>
						<image src="@/static/image/getJob/line.png" mode="widthFix"></image>
					</view>
					<view>{{item.createTime}}</view>
				</view>
			</view>
			<!-- F4 岗位列表 结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner:[
					require('@/static/image/getJob/jobBanner.png'),
					require('@/static/image/getJob/jobBanner.png'),
					require('@/static/image/getJob/jobBanner.png'),
				],
				// list:[
				// 	{
				// 		job:'工厂车床操作技术员',
				// 		location:'秦家店村',
				// 		salary:'5000-8000',
				// 		desc:'职责描述：1、负责CNC数控车床日常管理；2、组织安排打样生产，跟进产品加工进度及质量；3、优化完善数控',
				// 		company:'新希望电子厂',
				// 		time:'2011-03-21',
				// 	},
				// 	{
				// 		job:'普工',
				// 		location:'秦家店村',
				// 		salary:'4000-7000',
				// 		desc:'职责描述：1.操作自动焊机，按照作业标准工作；2.愿意学习者优先；3.有机械厂工作经验优先；',
				// 		company:'新希望电子厂',
				// 		time:'2011-03-21',
				// 	}
				// ],
				list:[],
			};
		},
		methods:{
			go(url){
				uni.showLoading({
					title:'加载中...'
				})
				uni.navigateTo({
					url:url,
					success: res => {},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			/**查询岗位信息（3条）*/
			queryPostInfoPage(){
				this.$api.request.queryPostInfoPage({
					areaCode:this.$api.util.getAreaCode(),
					startIndex:1,
					pageSize: 3,
					postRequire:null,
					published:null,
			
				}, (res) => {
					if (res.body.status.statusCode == '0') {
						this.list = res.body.data.list  //数据列表
					}
				})
			},
		},
		onShow(){
			this.queryPostInfoPage()
		},
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
	.container{
		padding:32rpx 32rpx;
	}
	.swiper-box{
		border-radius: 8rpx;
		margin-bottom: 32rpx;
	}
	// 菜单样式
	.menu-box{
		display: flex;
		justify-content: space-between;
		.left{
			width: 224rpx;
			height: 288rpx;
			background-image: url(@/static/image/getJob/info-bg.png);
			background-repeat: no-repeat;
			background-size: 100%;
			border-radius: 8rpx;
			position: relative;
			image{
				position: absolute;
				width: 90rpx;
				height: 90rpx;
				top:20rpx;
				left: 20rpx;
			}
			.content-box{
				position: absolute;
				bottom: 20rpx;
				padding: 24rpx;
				.text{
					font-size: 32rpx;
					color: #FFFFFF;
					margin-bottom: 10rpx;
				}
				.reminds{
					color: #A7CFF6;
					font-size: 24rpx;
				}
			}
		}
		.rightSide{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.skills{
				position: relative;
				width:430rpx;
				height: 128rpx;
				margin-bottom: 32rpx;
				border-radius: 8rpx;
				background-image: url(@/static/image/getJob/skills-bg.png);
				background-repeat: no-repeat;
				background-size: 100%;
				image{
					position: absolute;
					width: 140rpx;
					height: 130rpx;
					bottom: 0;
					right: 20rpx;
				}
				.content-box{
					padding: 24rpx 48rpx;
					.text{
						font-size: 32rpx;
						color: #FFFFFF;
						margin-bottom: 10rpx;
					}
					.reminds{
						color: #FFFFFF;
						opacity: 0.72;
						font-size: 24rpx;
					}
				}
			}
			.rules{
				position: relative;
				width:430rpx;
				height: 128rpx;
				border-radius: 8rpx;
				background-image: url(@/static/image/getJob/rules-bg.png);
				background-repeat: no-repeat;
				background-size: 100%;
				image{
					position: absolute;
					width: 122rpx;
					height: 128rpx;
					bottom: 0;
					right: 25rpx;
				}
				.content-box{
					padding: 24rpx 48rpx;
					.text{
						font-size: 32rpx;
						color: #FFFFFF;
						margin-bottom: 10rpx;
					}
					.reminds{
						color: #FFFFFF;
						opacity: 0.72;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.list-title{
		padding-top: 32rpx;
		padding-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 700;
		font-size: 32rpx;
		view:nth-child(2){
			color: #3E9CF9;
			font-size: 24rpx;
			font-weight: 400;
			
		}
	}
	.card{
		padding: 26rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		.title-box{
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			font-size: 32rpx;
			.location{
				color: #3E9CF9;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
		.pay-box{
			margin-top: 16rpx;
			display: flex;
			color: #EE5E5E;
			font-size: 40rpx;
			overflow:hidden;
			.unit{
				font-size: 24rpx;
				margin-left: 10rpx;
				line-height: 54rpx;
			}
		}
		.description{
			margin-top: 16rpx;
			overflow:hidden;
			text-overflow:ellipsis;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
			color: #999CA3;
			font-size: 24rpx;	
		}
		.time-box{
			display: flex;
			color: #999CA3;
			padding-top: 36rpx;
			view:nth-child(2){
				padding: 0 10rpx;
				image{
					width: 2rpx;
					height: 24rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>
